<template>
  <div class="uni-content">
    <div class="uni-card">
      <LoraHead class="uni-head" ref="loraHead"/>
      <LoraMap ref="loraMap" @onShowUser="showUser"/>
      <LoraSearch ref="loraSearch" class="uni-search" @OnChangeFloors = "changeFloors" @onShowUser = "showUser" />
      <LoraButtons class="uni-buttons" @onToggleMode="toggleMode" />
      <UserPopover ref="userPopover" @onHistory="showHistory"/>
      <LoraHlsVideo ref="loraHlsVideo" />
      <!-- <LoraTotal ref="loraTotal" :floorIds="floorIds"/> -->
      <!-- <div class="uni-user-type-list">
        <div class="uni-user-type uni-flex" v-for="user in userTypeList" @click="changeUserType(user)">
          <img class="uni-face" :class="{'uni-gray':!isActiveUserType(user)}" :src="backParam['userType'+user.value]" />
          <span class="uni-name" :class="{'uni-gray':!isActiveUserType(user)}" >{{user.label}}</span>
        </div>
      </div> -->
    </div>
    <JfHistoryPosition ref="jfHistoryPosition"></JfHistoryPosition>
  </div>
</template>

<script>
  import LoraHead from './LoraHead.vue'
  import LoraSearch from './LoraSearch.vue'
  import LoraMap from '@/components/jfMap/loraMap.vue'
  import LoraButtons from './LoraButtons.vue'
  import LoraTotal from './LoraTotal.vue'
  import UserPopover from './UserPopover'
  import LoraHlsVideo from './LoraHlsVideo.vue'
  import JfHistoryPosition from '../location/JfHistoryPosition'
  import * as XcUtil from '../../../../utils/xcutil.js'
  let onlineTimer = null

  let timeCount = 0
  var lastPoint = null;

  export default {
    name: 'Lora',
    components: {
      LoraMap,
      LoraHead,
      LoraSearch,
      LoraButtons,
      LoraTotal,
      UserPopover,
      LoraHlsVideo,
      JfHistoryPosition
    },
    data() {
      return {
        floorIds: '',
        userType1: true,
        userType2: true,
        userType3: true,
        userType4: true
      }
    },
    mounted() {
      this.queryOnline();
    },
    activated() {
      if(onlineTimer) {
        clearTimeout(onlineTimer);
        onlineTimer = null
      }
      this.queryOnline();
    },
    deactivated() {
      if(onlineTimer) {
        clearTimeout(onlineTimer);
        onlineTimer = null
      }
    },
    beforeDestroy() {
      if(onlineTimer) {
        clearTimeout(onlineTimer);
        onlineTimer = null
      }
    },
    computed: {
      onlineTime() {
        if (!this.$store.state.config.backParam.onlineTime){
          return 60
        }
        return this.$store.state.config.backParam.onlineTime
      },
      userTypeList() {
        return this.$dictUtils.getDictList("lora_user_type")
      },
      backParam() {
        return this.$store.state.config.backParam
      }
    },
    methods: {
      changeFloors(buildingId, floorIds) {
        this.$refs.loraMap.showFloors(floorIds, [])
        this.floorIds = floorIds.join(",")
        timeCount = 0
        if(lastPoint && this.floorIds.indexOf(lastPoint.floorId) != 0) {
          this.removeUserPopover()
        }
      },
      showUser(user) {
        this.$refs.loraMap.getMapManager().clearCoord();
        this.$refs.userPopover.setUser(user);
        this.$refs.loraMap.getMapManager().coordById(user.id, (visible, coord)=>{
          if(visible) {
            this.$refs.userPopover.setPosition(coord.x, coord.y)
          } else {
            this.$refs.userPopover.setPosition(-200, -100)
          }
        });
      },
      changeUserType(userType) {
        this.$data['userType'+userType.value] = !this.$data['userType'+userType.value]
        timeCount = 0
        if(lastPoint && this.floorIds.indexOf(lastPoint.floorId) != 0) {
          this.removeUserPopover()
        }
      },
      removeUserPopover() {
        userShow = null
        lastPoint = null
        compassTime = 0
        this.trackSlider = 0
        if(this.$refs.userPopover) {
          this.$refs.userPopover.setPosition(-200, -100)
        }
      },
      isActiveUserType(userType) {
        return this.$data['userType'+userType.value]
      },
      toggleMode(mode, callback) {
        if (this.$refs.loraMap) {
          this.$refs.loraMap.setViewMode(mode, callback)
        }
      },
      queryOnline(){
        var params = {
          timeout:this.onlineTime,
          floorIds: this.floorIds
        }
        this.$http({
          url: '/lora/api/queryOnline',
          method: 'get',
          loading: false,
          message: false,
          timeout: 5000,
          params: params
        }).then(({ data }) => {
          var timestamp = data.timestamp
          if (data && data.success && data.list) {
            var userList = data.list.filter((item)=>{
               return this.$data['userType'+item.userType] &&this.floorIds.indexOf(item.floorId) != -1
            })
            if(this.$refs.loraHead) {
              this.$refs.loraHead.setUserList(userList)
            }
            if (this.$refs.loraMap) {
              this.$refs.loraMap.showUsers(userList, timestamp)
            }
          }
          onlineTimer = setTimeout(()=>{
            this.queryOnline();
          }, 6000)
        })
      },
      showHistory(user){
        this.$refs.jfHistoryPosition.init(user)
      }
    }
  }
</script>

<style scoped lang="less">
  .uni-content {
    width: 100%;
    height: 100%;
    position: absolute;
    padding-right: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
  }
  .uni-card {
    width: 100%;
    height: 100%;
    border: 1px solid #EBEEF5;
    background-color: #FFFFFF;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 4px;
    position: relative;
  }
  .uni-head {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    background-color: #FFFFFF;
  }
  .uni-search {
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 1;
  }
  .uni-buttons {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 10;
  }
  .uni-user-type-list {
    background-color: rgba(255,255,255, 0.9);
    box-shadow: 0 0 5px 0 #cccccc;
    border-radius: 5px;
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 10;
    padding: 3px 10px;
    .uni-user-type {
      align-items: center;
      margin: 6px 0;
    }
    .uni-name {
      font-size: 10px;
    }
    .uni-face {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    .uni-face.uni-gray {
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
      filter: gray;
      opacity:0.7;//通过改变透明度来调节灰色的程度
    }
    .uni-name.uni-gray {
      color: #999999;
    }
  }
</style>
